<!-- 分页结果 -->
<!--分页-->
<template>


  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
 
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
 

              <a href="./CoreList.vue#c1" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div  class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              

            </div>
        </div>


      </div>     
      </div>             
    </el-card>


<el-card class="margin-top-20">
  <!--一级分类-->
        
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留-->
        <table class="total-table">
          <tr>
            <td style="width:100px;">核心一览</td>
            
            <td style="width:100px;">爆款分析</td>
          
            <td style="width:100px;">评论分析</td>
        
            <td style="width:100px;">弹幕分析</td>
            
            <td style="width:100px;">观众画像</td>
                      

          </tr>
        </table>    
        </div>
    

      </div>
       

    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
        
        <table>
          <tr style="width:0px;">
            <td style="width:6500px;">传播与互动变化趋势</td>   
            
            <td style="width:900px;">总量 | 增量</td>            
                 
          </tr>
        </table>
        
      </div>
 <!--条形图-->    




 <el-card class="margin-top-20"> 

    <div class="line-1px" />

      <div style="display: flex; justify-content: space-around">

        <!--<div id="echart1">
          <div id="main" style="width:500px;height:300px;"></div>
          <div id="main1" style="width:500px;height:300px;"></div>
        </div>

        <div id="echart2">
          <div id="main2" style="width:500px;height:300px;"></div>
          <div id="main3" style="width:500px;height:300px;"></div>
        </div>-->
        
      

        <div id="main" style="width: 1000px;height:500px;" ></div>

      <!--</div>-->
      </div>




 </el-card>


<!--end-->

<!--视频标签-->

    

<!--end-->    
      </el-card>




<!--e分页5-->

<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          ">

       <table class="total-table">
          


        </table>  

        </div>

      </div>
    </el-card>

<!---->


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "",
  data: function () {
    return {
 
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line()
  },

  methods: {
    
    //第一个图
    line(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    //title: {
      //  text: '传播与互动变化趋势'
    //},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['播放', '分享', '弹幕', '评论']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
           data: [10-23,10-24,10-25,10-26,10-27,10-29]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '播放',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 141, 170, 190, 210, 300]
        },
        {
            name: '分享',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 141, 170, 190, 210, 300]
        },
        {
            name: '弹幕',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '评论',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        /*{
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }*/
    ]
};

option && myChart.setOption(option);

//第二个图






//到此结束
  
    
    }
  
  },
};
</script>
<style lang="scss" scoped>
#echart1 div{
  float: left;
}
#echart2 div{
  float: left;
}
.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }
}
</style>
